<template>
  <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
    <el-form :model="formData">
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>开课教研室</span>
          </div>
          <label>{{ formData.teachingClassName }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程编号</span>
          </div>
          <label>{{ formData.courseCode }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程名称</span>
          </div>
          <label>{{ formData.courseName }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程简称</span>
          </div>
          <label>{{ formData.courseSimpleName }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程英文名称</span>
          </div>
          <label>{{ formData.courseEnName }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学分</span>
          </div>
          <label>{{ formData.credit }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>讲授学时</span>
          </div>
          <label>{{ formData.teachingHours }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>实践学时</span>
          </div>
          <label>{{ formData.practiceHours }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>总学时</span>
          </div>
          <label>{{ formData.totalHours }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>学科分类</span>
          </div>
          <label>{{ formData.subjectType }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>适用培养层次</span>
          </div>
          <label>{{ formData.eduLevel }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程负责人</span>
          </div>
          <label>{{ formData.courseCharger }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程评价</span>
          </div>
          <label>{{ formData.courseEvaluate }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>是否为主干课</span>
          </div>
          <label>{{ formData.mainSubject }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程类型</span>
          </div>
          <label>{{ formData.courseType }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>分制</span>
          </div>
          <label>{{ formData.pointsSystem }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课下作业成绩所占比例</span>
          </div>
          <label>{{ formData.homeworkRatio }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课堂测试成绩所占比例</span>
          </div>
          <label>{{ formData.hskeRatio }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>期中考试成绩所占比例</span>
          </div>
          <label>{{ formData.midExamRatio }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课终考核成绩所占比例</span>
          </div>
          <label>{{ formData.finalExamRetio }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>考试成绩一票否决制</span>
          </div>
          <label>{{ formData.gradeOneVeto }}</label>
        </el-form-item>
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>状态</span>
          </div>
          <label>{{ formData.state }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程主页</span>
          </div>
          <label>{{ formData.courseHomepage }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程标准</span>
          </div>
          <label>{{ formData.courseStandard }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>先修课程</span>
          </div>
          <label>{{ formData.prerequisiteCourse }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>课程简介</span>
          </div>
          <label>{{ formData.courseIntro }}</label>
        </el-form-item>
      </div>
      <div style="display: flex;">
        <el-form-item class="my-form-item">
          <div class="my-form-item-label">
            <span>备注</span>
          </div>
          <label>{{ formData.remark }}</label>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { queryCourseDetail } from '@/api/trainingManagement/place'
export default {
  data() {
    return {
      courseId: this.$route.query.id,
      formData: {}
    }
  },
  mounted () {
    if (this.courseId !== undefined) {
      queryCourseDetail(this.courseId).then(res => {
        if (res.data.code === 200) {
          console.log(res.data.data, 11111111111)
          this.formData = res.data.data
        }
      })
    } else {
      this.$message.warning('课程信息丢失！')
    }
  }
}
</script>

<style lang="less" scoped>
  .my-form-item {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 220px;
        padding-left: 0;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        color: #004ca7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      .mustW {
        color: red;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    label {
      width: 100%;
      margin: 10px 30px 0;
      color: #004ca7;
    }
  }
</style>
